<script setup>
import { useUseStore } from "@/stores/user";
import { ref } from "vue";
const emits = defineEmits(["acceptCountry"]);
const props = defineProps(["countryData", "field", "currentIndex"]);

const selectCountry = (item, index) => {
  emits("acceptCountry", item, props.field, index);

  if (props.field == "country") {
    useUseStore().countryCode = item.countryCode;
  }
};
</script>
<template>
  <div class="input-box">
    <div class="modify-name">select {{ props.field }}</div>
    <div class="gender">
      <div class="countryDiv" v-for="(item, index) in props.countryData" :key="index" @click="selectCountry(item, index)"
        :style="{ color: props.currentIndex == index ? '#1989fa' : '#333' }">
        {{ item.countryEName }}
        <img :src="`/images/countryImg/${item.img}`">
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.input-box {
  position: absolute;
  bottom: 0;
  z-index: 99;
  width: 100vw;
  background-color: rgb(255, 255, 255);

  .modify-name {
    height: 34rem;
    line-height: 34rem;
    text-align: center;
    font-size: 18rem;
    font-weight: 500;
    box-shadow: 0rem 2rem 5rem 2rem #d7dce0;
  }

  .gender {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding-top: 16rem;
    align-items: center;
    height: 300rem;
    overflow: auto;

    .countryDiv {
      font-size: 18rem;
      font-weight: 500;
      width: 90vw;
      text-align: center;
      height: 30rem;
      line-height: 30rem;
      border-bottom: 1rem solid #e5e5e5;
      display: flex;

      img {
        height: 28rem;
        margin-left: auto;
      }
    }
  }
}
</style>
